﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EntityAppFormConfigPage.aspx.cs" Inherits="Easy.Web.Pages.EntityPages.EntityAppFormConfigPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <link href="/_css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="/_css/common.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/_css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/_css/bootstrap-select.min.css" />

    <script src="/_js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/_js/bootstrap-select.min.js" type="text/javascript"></script>
    <script src="/_js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/_js/json2.js" type="text/javascript"></script>
    <script src="/_js/common.js"></script>
    <script src="/_js/jquery.dragsort-0.5.2.min.js"></script>
    <script src="/_js/modernizr_input.js"></script>


    <script src="/_js/CodeMirror/codemirror.js"></script>
    <link href="/_css/codemirror.css" type="text/css" rel="stylesheet" />

    <script src="/_js/CodeMirror/CodeMirrorModes/css/css.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorModes/javascript/javascript.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorModes/htmlmixed/htmlmixed.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorModes/vbscript/vbscript.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorModes/xml/xml.js"></script>


    <script src="/_js/CodeMirror/CodeMirrorAddon/hint/show-hint.js"></script>
    <link href="/_js/CodeMirror/CodeMirrorAddon/hint/show-hint.css" rel="stylesheet" type="text/css" />
    <script src="/_js/CodeMirror/CodeMirrorAddon/hint/javascript-hint.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/hint/html-hint.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/hint/xml-hint.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/selection/selection-pointer.js"></script>
    <script src="/_js/CodeMirror/HtmlBeautify.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/selection/active-line.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/edit/matchbrackets.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/edit/closebrackets.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/edit/matchtags.js"></script>
    <script src="/_js/CodeMirror/CodeMirrorAddon/edit/closetag.js"></script>
    <style>
        .CodeMirror {
            height: 100%;
        }

        .unactive {
            background-color: lightgray;
            border-radius: 4px;
        }

        .BootStrapSelect {
            background-color: #fff;
            border-bottom-color: #eee;
            border: 1px solid #ccc;
        }

        .TopButton {
            margin-top: 2px;
        }
    </style>
    <script type="text/javascript">
        var JsEditor;
        var HtmlEditor;
        var RefreshFlag = true;
        function InitPage() {
            if (!Modernizr.input || !Modernizr.inputtypes || !Modernizr.csscolumns || !Modernizr.csstransitions) {
                alert('浏览器不支持HTML5/CSS3属性！功能可能受限！');
            }
            //处理高度
            $(".tab-content").height($(window).height() - 116).show();
            $('.modal-autocontent').height($(window).height() - 246).show();
            $(".tab-content").height($(window).height() - 116).show();
            $('.modal-autocontent').height($(window).height() - 246).show();
            //延迟处理HtmlCodeMirror
            setTimeout(function () {
                var mixedMode = {
                    name: "htmlmixed",
                    scriptTypes: [{
                        matches: /\/x-handlebars-template|\/x-mustache/i,
                        mode: null
                    },
                                  {
                                      matches: /(text|application)\/(x-)?vb(a|script)/i,
                                      mode: "vbscript"
                                  }]
                };
                var TempTextArea = document.getElementById('temptextarea');
                var AspTextArea = document.getElementById('content');
                $(TempTextArea).val($(AspTextArea).val());
                HtmlEditor = CodeMirror.fromTextArea(TempTextArea, {
                    mode: mixedMode,
                    lineNumbers: true,
                    lineWrapping: true,
                    extraKeys: { "Alt-/": "autocomplete" },
                    selectionPointer: true,
                    styleActiveLine: true,
                    matchBrackets: true,
                    matchTag: true,
                    closeTag: true,
                    closeBrackets: true,
                    smartIndent:true
                });
                $('#HtmlCodeArea').children('.CodeMirror').addClass('codemirror-content');
                $('.codemirror-content').height($(".tab-content").height() - $('#toolbar').height() - 5).show();
                HtmlEditor.on('change', function () {
                    $('#container').html(HtmlEditor.getValue());
                    $("#fields li").trigger('RefreshState');
                    if (!$('#AutoRefresh').is(':checked'))
                        return;
                    ShowPreview();
                });
                HtmlEditor.on('blur', function () {
                    if (!$('#AutoRefresh').checked)
                        return;
                    ShowPreview();
                });
                ShowPreview();
                HtmlEditor.refresh();
                $('#container').html(HtmlEditor.getValue());
                $("#fields li").trigger('RefreshState');
                HtmlEditor.focus();
            }, 300);

            //窗口变化响应
            $(window).resize(function () {
                $('.modal-autocontent').height($(window).height() - 246).show();
                $(".tab-content").height($(window).height() - 116);
                $('.codemirror-content').height($(".tab-content").height() - $('#toolbar').height() - 5).show();
                //此处运行两次，避免有些浏览器渲染时候存在BUG
                $('.modal-autocontent').height($(window).height() - 246).show();
                $(".tab-content").height($(window).height() - 116);
                $('.codemirror-content').height($(".tab-content").height() - $('#toolbar').height() - 5).show();
            });

            //初始化提示窗
            $('[data-toggle="tooltip"]').tooltip();

            //初始化tabpanel
            $('div[role=tabpanel]').css('display', 'none');
            $('#' + $('li[role=presentation].active').attr('data-ShowPanel')).css('display', 'block');

            //启动tabpanel
            $('li[elementtype=toppannel]').on('click', function (e) {
                $('li[elementtype=toppannel]').removeClass('active');
                var tabClick = $(this);
                tabClick.addClass('active');
                $('div[role=tabpanel]').css('display', 'none');
                $('#' + tabClick.attr('data-ShowPanel')).css('display', 'block');
            });


            //左侧工作区按钮事件
            $("#fields li").on("click", function () {
                if ($("#container #c_" + $(this).attr("okey")).length > 0) {
                    $(this).addClass("active");
                    $(this).removeClass("unactive");
                    $('#container').html(HtmlEditor.getValue());
                    $('#container #c_' + $(this).attr("okey")).remove();
                    HtmlEditor.setValue($('#container').html());

                } else {
                    $(this).removeClass("active");
                    $(this).addClass("unactive");

                    if ($('#container #MainList').length <= 0) {
                        $('#container').append('<ul id="MainList" class="mui-table-view mui-table-view-chevron"></ul>');
                    }
                    $('#container #MainList').append($(this).attr("_innerHTML"));
                    HtmlEditor.setValue($('#container').html());
                }
            });
            $("#fields li").on("RefreshState", function () {
                if ($("#container #c_" + $(this).attr("okey")).length > 0) {
                    $(this).removeClass("active");
                    $(this).addClass("unactive");
                } else {
                    $(this).addClass("active");
                    $(this).removeClass("unactive");
                }
            });
        }

        function BeautifyHtml() {
            var beautified = style_html(HtmlEditor.getValue(), null, null);
            HtmlEditor.setValue(beautified);
        }

        function UndoHtmlEditor() {
            HtmlEditor.undo();
            HtmlEditor.refresh();
        }

        function RedoHtmlEditor() {
            HtmlEditor.redo();
            HtmlEditor.refresh();
        }

        function BeautifyJs() {
            var beautified = js_beautify(JsEditor.getValue(), null, null);
            JsEditor.setValue(beautified);
        }

        function UndoJsEditor() {
            JsEditor.undo();
            JsEditor.refresh();
        }

        function RedoJsEditor() {
            JsEditor.redo();
            JsEditor.refresh();
        }

        function htmlEncode() {
            var div1 = document.createElement('div');
            div1.appendChild(document.createTextNode(document.getElementById('content').value));
            document.getElementById('content').value = div1.innerHTML;
        }

        function DoHtmlEncode(str) {
            var div1 = document.createElement('div');
            div1.appendChild(document.createTextNode(str));
            return div1.innerHTML;
        }

        function checkForm() {
            if ($.getQueryString("formname") == null || $.getQueryString("formname") == false) {
                $("#FormNameModal").modal('show');
                return false;
            }
        }

        function btn_back() {
            window.location.href = "/Pages/EntityPages/AttributeListPage.aspx?Id=" + $.getQueryString("Id");
        }

        function addUlSign() {
            if (HtmlEditor.somethingSelected()) {
                HtmlEditor.replaceSelection("<ul class=\"mui-table-view mui-table-view-chevron\">\n" + HtmlEditor.getSelection() + "\n\n</ul>\n");
            } else {
                HtmlEditor.setValue("<ul class=\"mui-table-view mui-table-view-chevron\">\n" + HtmlEditor.getValue() + "\n\n</ul>\n");
            }
            HtmlEditor.refresh();
        }

        function addDisableSign() {
            if (HtmlEditor.somethingSelected()) {
                $('#TempContain').html(HtmlEditor.getSelection());
                try {
                    $('#TempContain').find('*').attr('tl-disable', true);
                } catch (e) {

                }
                HtmlEditor.replaceSelection($('#TempContain').html());
            }
        }

        function ShowPreview() {
            var SubmitForm = document.createElement('form');
            SubmitForm.target = "AppPreview";
            SubmitForm.action = "AppFormPreview.aspx";
            SubmitForm.method = "post";
            var entityinfo = document.createElement('textarea');
            entityinfo.name = "entityname";
            entityinfo.value = $.getQueryString("entityname");
            SubmitForm.appendChild(entityinfo);
            var htmlinfo = document.createElement('textarea');
            htmlinfo.name = 'userhtml';
            htmlinfo.value = DoHtmlEncode(HtmlEditor.getValue());
            SubmitForm.appendChild(htmlinfo);
            SubmitForm.submit();
        }
        function ShowPreviewInNewWindow() {
            var SubmitForm = document.createElement('form');
            SubmitForm.target = "_blank";
            SubmitForm.action = "AppFormPreview.aspx";
            SubmitForm.method = "post";
            var entityinfo = document.createElement('textarea');
            entityinfo.name = "entityname";
            entityinfo.value = $.getQueryString("entityname");
            SubmitForm.appendChild(entityinfo);
            var htmlinfo = document.createElement('textarea');
            htmlinfo.name = 'userhtml';
            htmlinfo.value = DoHtmlEncode(HtmlEditor.getValue());
            SubmitForm.appendChild(htmlinfo);
            var jspathinfo = document.createElement('textarea');
            jspathinfo.name = 'jsfilepath';
            jspathinfo.value = $('#jscontent_Src').val();
            SubmitForm.appendChild(jspathinfo);
            SubmitForm.submit();
        }

        function OnSaveButtonClick() {
            $('#content').val(HtmlEditor.getValue());
            htmlEncode();
            return checkForm();
        }

        function AddGPSSignal() {
            if (HtmlEditor.somethingSelected()) {
                $('#TempContain').html(HtmlEditor.getSelection());
                try {
                    $('#TempContain').find('*').attr('tl-gps', 'location');
                } catch (e) {

                }
                HtmlEditor.replaceSelection($('#TempContain').html());
            }
        }

        function ShowAttachModal() {
            $('#Attachmodal').modal({ backdrop: 'static', keyboard: false });
            $('#AttachmodalBody').children('input').val('');
        }

        function AddAttach() {
            var Templete = "<li>" + $('#attflag').val() + "：    <ul name=\'attachment\' attflag=\'" + $('#atttitle').val() + "\' class=\'mui-table-view\'>      <li ismodel=\'true\' class=\'mui-table-view-cell mui-media\'>        <input attoname=\'entityname\' type=\'hidden\'>  <input attoname=\'attflag\' type=\'hidden\'>   <input attoname=\'recordid\' type=\'hidden\'>   <input attoname=\'attachmentid\' type=\'hidden\'>    <a href=\'javascript:;\'>  <img attoname=\'attpath\' class=\'mui-media-object mui-pull-left\' src=\'http://placehold.it/40x30\'>   <div class=\'mui-media-body\'>  <span attoname=\'name\'>幸福</span>  <p attoname=\'attdesc\'>aaa</p>  </div> </a>      </li>  </ul>  </li>";
            $('#container #MainList').append(Templete);
            HtmlEditor.setValue($('#container').html());
        }
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body onload="InitPage()">
    <form id="form1" runat="server">
        <div style="padding: 10px; background-color: #F7F7F7">
            <span style="line-height: 32px; font-weight: 600; font-size: large; color: darkgray">Form名称：<span id="span_formname" runat="server"></span>
            </span>
            <!-- 抬头-->
            <span class="pull-right" style="margin-left: 5px"><a style="cursor: pointer" class="btn btn-warning ng-binding" title="取消" onclick="btn_back()"><span class="glyphicon glyphicon-trash">取消</span></a>
            </span>
            <asp:LinkButton CssClass="btn btn-primary ng-binding pull-right" ID="SaveFormStructure" OnClientClick="return OnSaveButtonClick();" runat="server" OnClick="SaveFormStructure_Click"><span class="glyphicon glyphicon-floppy-save">保存</span></asp:LinkButton>
        </div>
        <ul class="nav nav-tabs">
            <li role="presentation" elementtype="toppannel" class="active" data-showpanel="formhtmlPannel" id="jtmlPaneltab"><a style="cursor: pointer">编辑Html代码</a></li>
            <li role="presentation" elementtype="toppannel" data-showpanel="formjsPannel" id="jsPaneltab"><a style="cursor: pointer">配置JS</a></li>
        </ul>
        <!--HTML配置页面 -->
        <div role="tabpanel" style="width: 100%; height: 100%; margin-top: 10px" class="tab-pane" id="formhtmlPannel">
            <div class="col-md-2 tab-content" id="ToolArea" style="overflow-y: auto; overflow-x: hidden">
                <ul id="fields" class="nav nav-pills nav-stacked">
                    <%=Fields %>
                </ul>
            </div>
            <div class="col-md-6 tab-content" id="HtmlCodeArea" style="overflow: auto">
                <div class="header" style="margin-bottom: 5px" id="toolbar">
                    <button class="btn btn-primary ng-binding TopButton" onclick="UndoHtmlEditor()" type="button">撤销</button>
                    <button class="btn btn-primary ng-binding TopButton" onclick="RedoHtmlEditor()" type="button">重做</button>
                    <button class="btn btn-primary ng-binding TopButton" onclick="BeautifyHtml()" type="button">整理</button>
                    <button class="btn btn-primary ng-binding TopButton" type="button" onclick="ShowPreview()">重载预览</button>
                    <button class="btn btn-primary ng-binding TopButton" type="button" onclick="ShowPreviewInNewWindow()">在新窗口预览</button>
                    <button class="btn btn-primary ng-binding TopButton" onclick="AddGPSSignal()" type="button">添加GPS标记</button>
                    <button class="btn btn-primary ng-binding TopButton" onclick="addDisableSign()" type="button">标记为不可编辑</button>
                    <button class="btn btn-primary ng-binding TopButton" onclick="ShowAttachModal()" type="button">新附件</button>
                    &nbsp;
                    <input id="AutoRefresh" type="checkbox" checked="checked" />自动刷新预览
                </div>
                <textarea style="display: none" id="temptextarea"></textarea>
                <asp:TextBox ID="content" Width="100%" Height="100%" Style="display: none" runat="server" TextMode="MultiLine"></asp:TextBox>
            </div>
            <div class="col-md-4 tab-content" id="PreviewArea">
                <iframe style="width: 100%; height: 100%" src="about:blank" name="AppPreview"></iframe>
            </div>
        </div>

        <!--JS路径配置页面 -->
        <div role="tabpanel" style="width: 100%; height: 100%;" class="tab-pane" id="formjsPannel">
            <div style="border: 15px solid white;" class="row gridly" data-listidx="0">
                <div class="col-md-12 form-group" style="width: 100%">
                    <label for="tlm_address" class="col-md-2 control-label">JS内容配置</label>
                    <div class="col-md-10">
                        <asp:ListBox ID="JsList" runat="server" CssClass="selectpicker" SelectionMode="Multiple" data-width="100%" data-style="BootStrapSelect" data-live-search="true"></asp:ListBox>
                    </div>
                </div>
                <div class="col-md-12 form-group">
                    <label for="tlm_address" class="col-md-2 control-label">加载数据前</label>
                    <div class="col-md-10">
                        <asp:TextBox runat="server" CssClass="form-control" ID="jscontent_beforeLoad" Width="100%"></asp:TextBox>
                    </div>
                </div>
                <div class="col-md-12 form-group">
                    <label for="tlm_address" class="col-md-2 control-label">加载数据后</label>
                    <div class="col-md-10">
                        <asp:TextBox runat="server" CssClass="form-control" ID="jscontent_afterLoad" Width="100%"></asp:TextBox>
                    </div>
                </div>
                <div class="col-md-12 form-group">
                    <label for="tlm_address" class="col-md-2 control-label">保存数据前</label>
                    <div class="col-md-10">
                        <asp:TextBox runat="server" CssClass="form-control" ID="jscontent_beforeSave" Width="100%"></asp:TextBox>
                    </div>
                </div>
                <div class="col-md-12 form-group">
                    <label for="tlm_address" class="col-md-2 control-label">保存数据后</label>
                    <div class="col-md-10">
                        <asp:TextBox runat="server" CssClass="form-control" ID="jscontent_afterSave" Width="100%"></asp:TextBox>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="FormNameModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="FormNameModalLabel">保存表单设计</h4>
                    </div>
                    <div class="modal-body">
                        <div class="input-group">
                            <span class="input-group-addon">架构名称</span>
                            <input aria-describedby="basic-addon1" class="form-control" id="FormNameModalName" placeholder="请输入架构名称" runat="server" type="text" />
                        </div>
                        <div class="input-group" style="margin-top: 15px">
                            <span class="input-group-addon">显示名称</span>
                            <input id="FormNameModalDisplayName" runat="server" type="text" class="form-control" placeholder="请输入显示名称" aria-describedby="basic-addon1" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <asp:LinkButton ID="SaveFormStructure_Create" CssClass="btn btn-primary ng-binding" OnClick="SaveFormStructure_Create_Click" runat="server">确认</asp:LinkButton>
                    </div>
                </div>
            </div>
        </div>
        <div id="Attachmodal" class="modal fade" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4>新增附件</h4>
                    </div>
                    <div class="modal-body" id="AttachmodalBody">
                        <div class="input-group col-md-11">
                            <span class="input-group-addon">附件开头</span>
                            <input type="text" class="form-control" aria-describedby="basic-addon1" id="atttitle" />
                        </div>
                        <br/>
                        <div class="input-group col-md-11">
                            <span class="input-group-addon">附件标志(attflag)</span>
                            <input type="text" class="form-control" aria-describedby="basic-addon1" id="attflag" />
                        </div>
<%--                        <br />

                            <select multiple="multiple" class=" input-group selectpicker col-md-11" title="请选择权限" id="AttPrivilege">
                                <option id="ReadPrivilege">Read</option>
                                <option id="InsertPrivilege">Insert</option>
                                <option id="UpdatePrivilege">Update</option>
                                <option id="DeletePrivilege">Delete</option>
                            </select>--%>

                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                        <button onclick="AddAttach()" class="btn btn-primary" data-dismiss="modal" type="button">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div id="container" style="display: none">
    </div>
    <div id="TempContain" style="display: none">
    </div>
</body>
</html>
